<template>
<!-- 全局loding -->
  <a-spin size="large" :spinning="spinning"  tip="授权码发送中，请稍后...">
  <div id="login">
    <div class="login-form">
      <a-form
        ref="formRef"
        :rules="formRules"
        :validateFirst = "true"
        :model="formState"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item>
          <img class="logo" src="@/assets/image/czmm.png" alt=""/>
          <div class="head">重置密码</div>
        </a-form-item>
        <a-form-item>
          <a-input
            placeholder="账 户 : "
            type="email"
            v-model:value="formState.userName"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            placeholder="邮 箱 : "
            type="email"
            v-model:value="formState.email"
            @blur="authorizationCodeSending"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            placeholder="授 权 码 : "
            v-model:value="formState.authCode"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            placeholder="新 密 码 : "
            v-model:value="formState.newPassword"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            placeholder="确 认 密 码 : "
            v-model:value="formState.confirmPassword"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 24 }">
          <a-button :loading="load" type="primary" @click="onSubmit">
            重置
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
  </a-spin>
</template>
<script>
import {reactive, ref, toRaw} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {message, notification} from "ant-design-vue";
import {send} from "../../api/module/mail";
import {create} from "../../api/module/captcha";
import {resetPassword} from "../../api/module/retrievePassWord";


export default {
  data() {
    return {}
  },
  setup() {
    const router = useRouter();
    const store = useStore();
    const load = ref(false);
    const spinning = ref(false); //全局loading
    const formRef = ref();

    // 登录参数
    const formState = reactive({
      userName: "",
      email: "1539904643@qq.com",
      authCode: "",
      newPassword: "",
      confirmPassword: "",
    });
    // 授权码发送参数
    const form = reactive({
      to: "",
      subject: "郑州乐创智能科技有限公司",
      captchaCode: "",
      content: "content"

    });
    //表单校验
    const formRules = {
      username: [{required: true, message: "请输入账户", trigger: "blur"}],
      email: [{required: true, message: "请输入邮箱", trigger: "blur"}],
      authCode: [{required: true, message: "请输入授权码", trigger: "blur"}],
      newPassword: [{required: true, message: "请输入新密码", trigger: "blur"}],
      confirmPassword: [{validator: checkConfirmPassword, trigger: "blur"}],
    };
    //自定义校验
    let checkConfirmPassword = async (_rule, value) => {
     console.log("----------",_rule,"+++++++",value)
    };
    // 随机验证码
    const refreshCaptcha = async function () {
      const result = await create();
      form.captchaCode = result.data.code;
    };

    // 授权码发送
    const authorizationCodeSending = async(e) => {
      // 发送验证码的时候开启全局loading
      spinning.value = true;
      //邮箱不能为空
      if (formState.email == null || formState.email === "") {
        notification['error']({
          message: "授权码发送失败",
          description: "邮箱不能为空",
        });
        return;
      }
      form.to = formState.email
      // 获取随机验证码
      await refreshCaptcha();
      form.content = "尊敬的用户：您的您的邮箱授权码为：【"+form.captchaCode+"】,授权码五分钟有效，请尽快在网页中填写，完成验证。"
      await send(toRaw(form)).then((response) => {
        if (response.success) {
          notification['success']({
            message: "授权码发送成功",
            description: "授权码有效期只有五分钟，请您尽快填写，以免授权码过期...",
          });
        } else {
          notification['error']({
            message: "授权码发送失败",
            description: "请检查您的邮箱是否输入正确...",
          });
        }
        spinning.value = false;
      })
    };

    // 登录验证
    const onSubmit = (e) => {
      formRef.value.validate().then(() => {
        resetPassword(toRaw(formState)).then((response)=>{
          console.log("response++++",response)
          if(response.success){
            message.success({ content: '保存成功', duration: 1 }).then(()=>{
              router.push("/login");
            });
          }else{
            message.error({ content: response.msg, duration: 1 });
          }
        })
      }).catch(error => {
        console.log('error', error);
      });
    };

    return {
      labelCol: {span: 6},
      wrapperCol: {span: 24},
      formRules,
      formState,
      form,
      onSubmit,
      authorizationCodeSending,
      formRef,
      load,
      spinning,

    };
  },
};
</script>
<style lang="less">
#login {
  width: 100%;
  height: 100%;
  background: url(../../assets/image/background.svg);
  background-size: cover;

  .login-form {
    margin: auto;
    width: 330px;
    min-height: 20px;
    padding-top: 150px;

    .captchaKey {
      display: none;
    }

    .captchaImage {
      border-radius: 4px;
      border: 1px solid #d9d9d9;
    }

    .ant-input {
      border-radius: 4px;
      line-height: 40px;
      height: 40px;
    }

    .ant-btn {
      width: 100%;
      height: 40px;
      line-height: 40px;
    }
  }

  .logo {
    width: 60px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    margin-left: 20px !important;
    border: none;
    background-color: transparent;
  }

  .head {
    width: 300px;
    font-size: 30px !important;
    font-weight: 700 !important;
    margin-left: 20px !important;
    line-height: 60px !important;
    margin-top: 10px !important;
    position: absolute !important;
    display: inline-block !important;
    height: 60px !important;
    color: #36b368;
  }

  .desc {
    width: 100% !important;
    text-align: center !important;
    color: gray !important;
    height: 60px !important;
    line-height: 60px !important;
  }

  .forgot {
    float: right;
  }
}
</style>
